<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-26 15:17:13
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-26 16:55:03
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
        }
    </style>
</head>
<body>
   
    <div class="box">
        <button id="btn">开始回放</button>
    </div>
    <script>
        var box = document.querySelector(".box");
        var btn =document.querySelector("#btn");
        var objx = [];
        var objy = [];
        box.onmousedown = function(){
           
            window.onmousemove = function(e){ 
                if(objx.length===0&&objy.length===0){
                    // 给x,y坐添加初始值
                objx[0] = 0;
                objy[0]=0;
                console.log(objx[0],objy[0]);
                
               
            }
                e = e || window.event;
                var x = e.clientX;
                var y = e.clientY ;
                if(x<0){
                    box.style.left = 0+'px';
                    x=0;
                }else if(x>window.innerWidth-box.offsetWidth){
                    box.style.left = (window.offsetWidth -box.offsetWidth)+'px';
                    x= window.offsetWidth -box.offsetWidth;
                }else{
                    box.style.left = x+'px';
                }
                if(y<0){
                    box.style.top = 0+'px';
                    y =0;
                }else if(y>window.innerHeight-box.offsetHeight){
                    box.style.top = (window.offsetHeight -box.offsetHeight)+'px';
                    y = window.offsetHeight -box.offsetHeight;
                }else{
                    box.style.top = y +'px';
                }
                // 存放 鼠标的位置
                objx.push(x);
                objy.push(y);
              
             }
            
        }
        window.onmouseup = function(){

            window.onmousemove = null;
        }
        btn.onclick = function(){
            var timer = setInterval(function(){
                    back();   
                 if(objx.length===0&&objy.length===0){
                 clearInterval(timer);
                    }
            },10)
        }
       
        function back(){
            console.log(objx[0]);
            
            box.style.left = objx[objx.length-1]+'px';
            box.style.top =  objy[objy.length-1]+'px';
            objx.pop();
            objy.pop();
            console.log(objy);
            
        }
    </script>
</body>
</html>